<template>
  <GridView v-if="gridJson" :gridJson="gridJson">
    <!-- 查询列表扩展 -->
    <template #query> </template>
    <!-- 操作列表扩展 -->
    <template #column="scope"></template>
    <!-- 数据处理扩展,存在时替换默认处理逻辑,插入对应字段名称的插槽即可替换默认内容渲染 -->
    <template #字段名称="{ scope, field }"></template>
    <!-- 操作列表扩展 -->
    <template #operate="{ scope }">
      <el-button size="small" type="primary" @click="powerSet(scope.row)">权限设置</el-button>
    </template>
    <!-- 编辑页面扩展任意属性 -->
    <template #EDIT_ADD_FIELD="{ modal }"></template>
    <!-- 添加页面扩展任意属性 -->
    <template #ADD_ADD_FIELD="{ modal }"> </template>
  </GridView>
  <el-empty description="网格数据加载中" v-else />
  <!-- 权限设置弹窗 -->
  <PowerTree
      v-if="isOpen"
      @editOk="isOpen = false"
      v-model="currentData"
      :options="options"
      :gridFunctuin="gridFunctuin"
  ></PowerTree>
</template>
<script setup>
import GridView from '../grid/json/preview/GridView.vue'
import PowerTree from './PowerTree.vue'
// 单页面网格模版
import { inject, ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { useOptionDataStore } from '@/stores/optionData'
import { storeToRefs } from 'pinia'
const { optionDatas } = storeToRefs(useOptionDataStore())
const router = useRoute()
const api = inject('api')
const gridJson = ref(null)
const isOpen = ref(false)
const options = ref([])
const currentData = ref({})
// 获取权限模版列表
const gridFunctuin = JSON.parse(sessionStorage.getItem('functionRole'))
onBeforeMount(() => {
  api
      .getApi('FaSysGrid', router.meta.grids[0])
      .getCurrentJson()
      .then((data) => {
        gridJson.value = data
      })
  // 获取权限树
  useOptionDataStore().add('861a309c9bfdaf1436b306ab0f46087b')
})
// 设置权限
function powerSet(row) {
  // 设置菜单树
  options.value = optionDatas.value['861a309c9bfdaf1436b306ab0f46087b'].options
  isOpen.value = true
  currentData.value = row
}
</script>
<style scoped></style>
